<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
    <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>    
        <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>      
        <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">       
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">    
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>统计数据</title>

<link href="css/bootstrap-jf.css" rel="stylesheet">
<link href="css/datepicker3-jf.css" rel="stylesheet">
<link href="css/styles-jf.css" rel="stylesheet">





  <script>
		
window.onload = function(){
	  $.ajax({    
	         url:"StatisticsServlet",//servlet文件的名称  
	           type:"POST", 
	           dataType:"json",
	           success:function(data){ 
	           	
 					var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
                    var lineChartData = {
			labels : data.dayListName,
			datasets : [
				{
					label: "My Second dataset",
					fillColor : "rgba(48, 164, 255, 0.2)",
					strokeColor : "rgba(48, 164, 255, 1)",
					pointColor : "rgba(48, 164, 255, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(48, 164, 255, 1)",
					data : data.dayListInfo
				}
			]

		};
		
	var barChartData = {
			labels :data.gradeListName,
			datasets : [
				{
					fillColor : "rgba(48, 164, 255, 0.2)",
					strokeColor : "rgba(48, 164, 255, 0.8)",
					highlightFill : "rgba(48, 164, 255, 0.75)",
					highlightStroke : "rgba(48, 164, 255, 1)",
					data :data.gradeListInfo 
				}
			]
	
		};

	var pieData = [
				{
					value: data.collegeListInfo1,
					color:"#30a5ff",
					highlight: "#62b9fb",
					label: "软件学院"
				},
				{
					value: data.collegeListInfo2,
					color:"#30a5ff",
					highlight: "#62b9fb",
					label: "信息学院"
				},
				{
					value: data.collegeListInfo3,
					color: "#f9243f",
					highlight: "#f6495f",
					label: "其他学院"
				}

			];

	var doughnutData = [
					{
						value: data.collegeListInfo1,
						color:"#30a5ff",
						highlight: "#62b9fb",
						label: "软件学院"
					},
					{
						value: data.collegeListInfo2,
						color:"#30a5ff",
						highlight: "#62b9fb",
						label: "信息学院"
					},
					{
						value: data.collegeListInfo3,
						color: "#f9243f",
						highlight: "#f6495f",
						label: "其他学院"
					}
	
				];

					var chart1 = document.getElementById("line-chart").getContext("2d");
					window.myLine = new Chart(chart1).Line(lineChartData, {
						responsive: true
					});
					var chart2 = document.getElementById("bar-chart").getContext("2d");
					window.myBar = new Chart(chart2).Bar(barChartData, {
						responsive : true
					});
					var chart3 = document.getElementById("doughnut-chart").getContext("2d");
					window.myDoughnut = new Chart(chart3).Doughnut(doughnutData, {responsive : true
					});
					var chart4 = document.getElementById("pie-chart").getContext("2d");
					window.myPie = new Chart(chart4).Pie(pieData, {responsive : true
					});
					
	           },
	           error:function(){
	           	alert("error");
	           }
	       });
};	
	</script>










</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="home.jsp"><span>师易</span>赛事服务平台</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="home.jsp" class="dropdown-toggle">个人主页</a>
					</li>
				</ul>
			</div>
							
		</div><!-- /.container-fluid -->
	</nav>
		
	<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
		<form role="search">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="欢迎来到师易赛事服务平台">
			</div>
		</form>
		<ul class="nav menu">
			<li><a href="all.jsp"><span class="glyphicon glyphicon-stats"></span> 全部赛事</a></li> 
			<li role="presentation" class="divider">主办方</li>  
			<li><a href="launch.jsp"><span class="glyphicon glyphicon-list-alt"></span>发布赛事</a></li>
			<li><a href="havaLaunch.jsp"><span class="glyphicon glyphicon-dashboard"></span>已发布赛事</a></li>
			<li   class="active"><a href="Statistics.jsp"><span class="glyphicon glyphicon-th"></span> 赛事情况统计</a></li>
			<li><a href="backstage.jsp"><span class="glyphicon glyphicon-th"></span> 赛事后台</a></li>
			<li role="presentation" class="divider">参赛方</li>  
			<li><a href="part.jsp"><span class="glyphicon glyphicon-user"></span> 参赛赛事</a></li>
			<li><a href="havaPart.jsp"><span class="glyphicon glyphicon-user"></span> 已赛赛事</a></li>
		</ul>
		<div class="attribution">赛事服务 by <a href="#">师易</a></div>
	</div><!--/.sidebar-->
		
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">赛事参加情况统计</h1>
				
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">参赛时间序列图</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">年级参赛分布图</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="main-chart" id="bar-chart" height="200" width="600"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->		
		
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">学院参赛分布图</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="chart" id="pie-chart" ></canvas>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">完成情况统计</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="chart" id="doughnut-chart" ></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-blue" data-percent="12" ><span class="percent">12%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-orange" data-percent="65" ><span class="percent">65%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-teal" data-percent="56" ><span class="percent">56%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-red" data-percent="27" ><span class="percent">27%</span>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
											
	</div>	<!--/.main-->
	  

	<script src="js/jquery-1.11.1.min-jf.js"></script>
	<script src="js/bootstrap-jf.js"></script>
	<script src="js/chart.min-jf.js"></script>
<!-- 	<script src="js/chart-data-ss.js"></script> -->
	<script src="js/easypiechart-jf.js"></script>
	<script src="js/easypiechart-data-jf.js"></script>
	<script src="js/bootstrap-datepicker-jf.js"></script>
	<script>
		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})
	</script>	
</body>

</html>
